<template>
    <bread-crumb :value="breadCrumbPath">
        <template v-if="pipelineList && pipelineList.length">
            <bread-crumb-item v-for="(crumb, index) in breadCrumbs" :key="index" v-bind="crumb">
                <slot v-if="index === breadCrumbs.length - 1"></slot>
            </bread-crumb-item>
        </template>
        <i v-else class="devops-icon icon-circle-2-1 spin-icon" />
    </bread-crumb>
</template>

<script>
    import BreadCrumb from '@/components/BreadCrumb'
    import BreadCrumbItem from '@/components/BreadCrumb/BreadCrumbItem'
    import { RESOURCE_ACTION, handlePipelineNoPermission } from '@/utils/permission'
    import { debounce } from '@/utils/util'
    import { mapActions, mapGetters } from 'vuex'

    export default {
        components: {
            BreadCrumb,
            BreadCrumbItem
        },
        data () {
            return {
                searchName: '',
                pipelineListSearching: false,
                breadCrumbPath: []
            }
        },
        computed: {
            ...mapGetters({
                pipelineList: 'pipelines/getPipelineList',
                curPipeline: 'pipelines/getCurPipeline'
            }),
            breadCrumbs () {
                return [{
                    icon: 'pipeline',
                    selectedValue: this.$t('pipeline'),
                    to: {
                        name: 'pipelineListEntry'
                    }
                }, {
                    paramId: 'pipelineId',
                    paramName: 'pipelineName',
                    selectedValue: this.curPipeline?.pipelineName || '--',
                    records: [
                        ...this.pipelineList
                    ],
                    showTips: true,
                    tipsName: 'switch_pipeline_hint',
                    tipsContent: this.$t('subpage.switchPipelineTooltips'),
                    to: this.$route.name === 'pipelinesHistory'
                        ? null
                        : {
                            name: 'pipelinesHistory'
                        },
                    handleSelected: this.doSelectPipeline,
                    searching: this.pipelineListSearching,
                    handleSearch: debounce(this.handleSearchPipeline, 300)
                }, {
                    selectedValue: ''
                }]
            }
        },
        watch: {
            'curPipeline.pipelineName': {
                handler (val) {
                    const title = val ? `${val} | ${this.$t('pipeline')}` : this.$t('documentTitlePipeline')
                    this.$updateTabTitle?.(title)
                },
                immediate: true
            }
        },
        created () {
            this.fetchPipelineList()
        },
        methods: {
            ...mapActions('pipelines', {
                searchPipelineList: 'searchPipelineList',
                requestPipelineDetail: 'requestPipelineDetail'
            }),
            async fetchPipelineList (searchName) {
                try {
                    const { projectId, pipelineId } = this.$route.params
                    const [list, curPipeline] = await Promise.all([
                        this.searchPipelineList({
                            projectId,
                            searchName
                        }),
                        this.updateCurPipeline({
                            projectId,
                            pipelineId
                        })
                    ])

                    this.setBreadCrumbPipelineList(list, curPipeline)
                } catch (err) {
                    console.log(err)
                    this.$showTips({
                        message: err.message || err,
                        theme: 'error'
                    })
                }
            },
            async setBreadCrumbPipelineList (list, pipeline) {
                if (pipeline && list.every(ele => ele.pipelineId !== pipeline.pipelineId)) {
                    list = [
                        {
                            pipelineId: pipeline.pipelineId,
                            pipelineName: pipeline.pipelineName
                        },
                        ...list
                    ]
                }
                this.$store.commit('pipelines/updatePipelineList', list)
            },
            async updateCurPipeline ({ projectId, pipelineId }) {
                try {
                    const curPipeline = await this.requestPipelineDetail({
                        projectId,
                        pipelineId
                    })
                    this.$store.commit('pipelines/updateCurPipeline', curPipeline)
                    return curPipeline
                } catch (error) {
                    if (error.code === 403) {
                        handlePipelineNoPermission({
                            projectId,
                            resourceCode: pipelineId,
                            action: RESOURCE_ACTION.VIEW
                        })
                    }
                    return false
                }
            },
            async doSelectPipeline (pipelineId, cur) {
                const { projectId, buildNo } = this.$route.params
                const result = await this.updateCurPipeline({
                    pipelineId,
                    projectId
                })
                if (!result) return
                // 清空搜索
                const list = await this.searchPipelineList({
                    projectId
                })
                await this.setBreadCrumbPipelineList(list, {
                    pipelineId,
                    pipelineName: cur.pipelineName
                })

                const name = buildNo ? 'pipelinesHistory' : this.$route.name
                this.$router.push({
                    name,
                    params: {
                        projectId,
                        pipelineId
                    }
                })
            },
            async handleSearchPipeline (value) {
                if (this.pipelineListSearching) return
                this.pipelineListSearching = true
                await this.fetchPipelineList(value)
                this.pipelineListSearching = false
            }
        }
    }
</script>

<style lang="scss">
    
</style>
